<template>
  <div class="menus">
    <vxe-toolbar ref="xTree">
      <template #buttons>
        <div class="sercarINput">
          <a-input v-model:value="SerInput.filterName" type="search" placeholder="请输入菜单名称，搜索"
            @keyup="searchEvent2"></a-input>
          <a-button type="primary" ghost @click="searchEvent2">查询</a-button>
          <a-button type="primary" @click="EditDialogVisible">新增菜单</a-button>
        </div>
      </template>
    </vxe-toolbar>
    <a-spin :spinning="loadings">
      <vxe-table border='none' ref="xTable1" show-header-overflow show-overflow :row-config="{ isHover: true }"
        align="left" max-height="1000" :tree-config="{}" :data="state.MenusRouterList">
        <vxe-column field="name" title="菜单名称" tree-node>
          <template #default="{ row }">
            {{ $t(row.meta.title) }}
          </template>
        </vxe-column>
        <vxe-column field="path" title="路由" width="15%"></vxe-column>
        <vxe-column field="component" title="组件路径"></vxe-column>
        <vxe-column field="roles" title="权限">
          <template #default="{ row }">
            {{ row.meta.roles.toString() }}
          </template>
        </vxe-column>
        <vxe-column field="sort" title="排序">
          <template #default="{ row }">
            {{ row.meta.sort.toString() }}
          </template>
        </vxe-column>
        <vxe-column field="type" title="类型">
          <template #default="{ row }">
            <a-tag :title="row.meta.type" color="green">{{ row.meta.type }}</a-tag>
          </template>
        </vxe-column>
        <vxe-column field="" title="操作" width="220">
          <template #default="{ row }">
            <a-button type="link" @click="EditDialogVisible">新增</a-button>
            <a-button type="link" @click="MenisEdit(row)">修改</a-button>
            <a-popconfirm title="你确认要删除这条数据吗 ?" @confirm="delRouteMens(row)" ok-text="确认" cancel-text="取消">
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
        </vxe-column>
      </vxe-table>
    </a-spin>
  </div>

  <!-- 弹框 -->
  <a-modal v-model:open="dialogVisible" :title="state.Tips" width="40%" :afterClose="handleClose" draggable>
    <a-form :model="MEnsObj">
      <a-row :gutter="20">
        <a-col :span="24" :offset="0">
          <a-form-item label="上级菜单">
            <a-tree-select v-model:value="MEnsObj.ParentPath" style="width: 100%" :field-names="{
              label: 'label',
              value: 'path',
              children: 'children',
              key: 'path'
            }" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="" allow-clear
              tree-default-expand-all :tree-data="cascaderList(useRoultSess.routesList)">
            </a-tree-select>
          </a-form-item>
        </a-col>
        <a-col :span="12" :offset="0">
          <a-form-item label="菜单名称">
            <a-input v-model:value="MEnsObj.title" />
          </a-form-item>
        </a-col>
        <a-col :span="12" :offset="0" v-if="MEnsObj.type !== '按钮'">
          <a-form-item label="路由名称">
            <a-input v-model:value="MEnsObj.name" placeholder="路由home=home/index" />
          </a-form-item>
        </a-col>
        <a-col :span="12" :offset="0" v-if="MEnsObj.type !== '按钮'">
          <a-form-item label="菜单图标">
            <a-popover placement="bottom" :width="400" trigger="click">
              <a-input v-model:value="MEnsObj.icon" />
              <template #content>
                <div class="my-dropdown4">
                  <div class="scrolbar">
                    <div @click="MEnsObj.icon = getfions(i)" v-for="i in iconlist.glyphs" :key="i.icon_id"
                      class="iocnntn">
                      <i :class="getfions(i)"></i>
                    </div>
                  </div>
                </div>
              </template>
            </a-popover>
          </a-form-item>
        </a-col>
        <a-col :span="12" :offset="0" v-if="MEnsObj.type !== '按钮'">
          <a-form-item label="重定向">
            <a-input v-model="MEnsObj.redirect" />
          </a-form-item>
        </a-col>
        <a-col :span="12" :offset="0">
          <a-form-item label="类型">
            <a-radio-group v-model:value="MEnsObj.type">
              <a-radio value="菜单">菜单</a-radio>
              <a-radio value="按钮">按钮</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12" :offset="0">
          <a-form-item label="菜单权限">
            <a-select v-model:value="MEnsObj.roles" value-key="" placeholder="请选择" clearable filterable multiple>
              <a-select-option value="admin">admin
              </a-select-option>
              <a-select-option value="common">common
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="12" :offset="0">
          <a-form-item label="排序">
            <a-input-number v-model:value="MEnsObj.sort" :min="1" :max="10" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <template #footer>
      <a-button @click="dialogVisible = false">取消</a-button>
      <a-button type="primary" @click="onSubmit">
        保存
      </a-button>
    </template>

  </a-modal>
</template>

<script setup lang="ts" name="roles">
import { reactive, ref, onMounted, nextTick } from 'vue'
import { RouterStore } from '/@/stores/RouterSrore'
import { RouteRecordRaw } from 'vue-router'
import iconlist from '/@/assets/icons/fontsicon/iconfont.json'
import { inputMenus } from '/@/typings/Views'
import { useI18n } from 'vue-i18n'
const useRoultSess = RouterStore()
// 定义搜索
const SerInput = reactive<inputMenus>({
  filterName: ''
})
// 状态数据
const state = reactive<any>({
  MenusRouterList: [], //数据
  Tips: '新增菜单'
})
const xTree = ref<any>()
const xTable1 = ref<any>()
const { t } = useI18n()
nextTick(() => {
  // 将表格和工具栏进行关联
  const $table = xTable1.value
  const $toolbar = xTree.value
  if ($table && $toolbar) {
    $table.connect($toolbar)
  }
})
// 分页
const cascaderList = (routerChiled: any) => {
  let Arrlist: any[] = JSON.parse(JSON.stringify(routerChiled))
  function dgrhs(hsuai: any): Array<Object> {
    let arr: any[] = []
    hsuai.forEach((p: any) => {
      p.label = t(p.meta.title)
      if (p.children && p.children.length > 0) {
        dgrhs(p.children)
      }
      arr.push(p)
    })
    return arr
  }
  return dgrhs(Arrlist)
}
// 点击新增
const EditDialogVisible = () => {
  dialogVisible.value = true
  state.Tips = '新增菜单'
}

const xDown4 = ref()
// 玄幻icon
function getfions(row: any): string {
  return `iconfont icon-${row.font_class}`
}

// 菜单新增和编辑的数据
const MEnsObj = reactive<any>({
  ParentPath: '', //父级组件
  path: '', //路由路径
  name: '', //路由名称
  component: '', //组件路径
  title: '', //菜单名称
  roles: [], //权限
  icon: '', //图标
  sort: 1, //排序
  redirect: '', //重定向
  type: '' //类型
})

// 编辑赋值
const MenisEdit = (row: RouteRecordRaw): void => {
  MEnsObj.path = row.path
  MEnsObj.name = row!.name!.toString()
  MEnsObj.component = row.component + ''
  MEnsObj.title = row!.meta!.title!.toString()
  MEnsObj.roles = [row!.meta!.roles]!.flat()
  MEnsObj.icon = row!.meta!.icon!.toString()
  MEnsObj.sort = parseInt(row!.meta!.sort!.toString())
  if (row.redirect) MEnsObj.redirect = row.redirect.toString()
  MEnsObj.type = row!.meta!.type!.toString()
  dialogVisible.value = true
  state.Tips = '编辑菜单'
}


const loadings = ref<Boolean>(false)

// 添加/修改的方法
const onSubmit = (): void => {
  loadings.value = true
  dialogVisible.value = false
  // 重新调用
  setTimeout(() => {
    getMenusRouterList()
  }, 100)
}

// 弹框弹出
const dialogVisible = ref<Boolean>(false)

// 菜单的数据
const getMenusRouterList = (): void => {
  loadings.value = false
  state.MenusRouterList = useRoultSess.routesList ?? []
}

// 关闭弹框的方法
const handleClose = (): void => {
  dialogVisible.value = false
  for (const key in MEnsObj) {
    MEnsObj[key] = ''
  }
  MEnsObj.roles = []
  MEnsObj.sort = 1
}
onMounted(() => {
  searchEvent2()
})


// 搜索的方法
const searchEvent2 = (): void => {
  loadings.value = true
  // 重新调用
  setTimeout(() => {
    getMenusRouterList()
  }, 100)
}

// 删除的方法
const delRouteMens = (RouterRow: RouteRecordRaw): void => {
  loadings.value = true
  // 重新调用
  setTimeout(() => {
    getMenusRouterList()
  }, 1000)
}
</script>

<style scoped lang="scss">
.menus {
  border: 0.7px solid var(--wangwang-border);
  width: 100%;
  padding: 5px;

  &:hover {
    box-shadow: 0 0 5px var(--wang-color-primary-lighter);
  }

  .sercarINput {
    display: flex;
  }
}

.my-dropdown4 {


  .scrolbar {
    height: 200px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;

    .iocnntn {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid var(--wangwang-border);
      cursor: pointer;
      transition: all 0.2s;
      color: var(--wangwang-text);

      &:hover {
        box-shadow: 0 0 8px var(--wang-color--parimary-bg);
        background-color: var(--wang-color--parimary-bg);
      }
    }
  }
}
</style>